function pieChart(){
    let mychart=echarts.init($('.pie')[0])
    let option={
        tooltip: {
            // {a} 表示series中的name
            // {b} 表示数据中的series.data中的name
            // {c} 表示每一项的值
            // {d} 表示百分比
            formatter: '{a} <br />{b} <strong>{c}</strong>人 占比{d}%'
          },
          title: {
            text: '籍贯 Hometown',
            textStyle: {
              color: '#6d767e' // 标题演示
            },
          },
          series: [
            {
              name: '各地学员分布',
              type: 'pie', // pie 表示饼图
              radius: ['10%', '65%'], // 内外圈的半径
              center: ['50%', '50%'], // 中心点
              roseType: 'area', // area表示面积模式，radius表示半径模式
              itemStyle: { // 每一项的设置
                borderRadius: 4, // 扇形边缘圆角设置
              },
              data: [
                { value: 40, name: '北京' },
                { value: 38, name: '山东' },
                { value: 32, name: '上海' },
                { value: 30, name: '江苏' },
                { value: 28, name: '河北' },
                { value: 26, name: '山西' },
                { value: 22, name: '河南' },
                { value: 18, name: '辽宁' }
              ]
            }
          ]
        };
        mychart.setOption(option)
    }


pieChart()   
// 饼图
function lineChart() {
  let myChart = echarts.init(document.querySelector('.line'));
  let option = {
    legend: {
      top: 20,
    },
    // 鼠标移入的提示
    tooltip: {
      trigger: 'axis', // 轴触发
      position: function (pt) {
        // pt是一个数组，pt[0]表示横坐标位置，'10%'表示Y轴方向始终保持距离顶部10%的距离
        // 所以意思是，提示框的位置会跟随鼠标左右移动，但纵向上的位置始终保持不变。
        return [pt[0], '10%']; 
      }
    },
    // 标题
    title: {
      text: '薪资 Salary',
      textStyle: {
        color: '#6d767e'
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false, // x轴两边的留白策略，false表示不留空白
      data: ['张三', '李四', '张飞', '赵云', '狗哥', '张三', '李四', '张飞', '赵云', '狗哥', '张三', '李四', '张飞', '赵云', '狗哥', '张三', '李四', '张飞', '赵云', '狗哥']
    },
    yAxis: {
      type: 'value',
      // Y轴类型为value，则留白策略指的是对数据的延伸。
      // 比如，图表中的数据最大值是17000，则Y轴最大数字大约是 17000 + 17000 * 50%
      boundaryGap: [0, '50%'],
    },
    // 数据缩放组件
    dataZoom: [
      // {
      //   type: 'inside', // 将拖动的条内置到轴里面，看不见了，但是可以拖动
      //   start: 0,
      //   end: 10
      // },
      {
        type: 'slider', // 拖动条显示到轴的外面（默认就是slider类型）
        start: 0, // 拖动滑块起始位置（这是一个百分比）
        end: 15 // 拖动滑块结束位置（这是一个百分比）
      }
    ],
    // 数据部分
    series: [
      {
        name: '期望薪资',
        type: 'line',
        smooth: true, // 表示使用平滑曲线
        symbol: 'none', // 线上拐点位置的样式，none表示没有；也可以是实心圆、空心圆、方块.....
        itemStyle: { // 单独控制这条线的颜色
          color: '#ee6666'
        },
        data: [8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000]
      },
      {
        name: '实际薪资',
        type: 'line',
        smooth: true,
        symbol: 'none',
        itemStyle: { // 单独控制这条线的颜色
          color: '#5470c6'
        },
        data: [9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 13000]
      }
    ]
  };
  myChart.setOption(option);
}
lineChart()
// 柱状图
function barChart(){
  let myChart=echarts.init($('.barChart')[0])
  let option={
    grid: {
      top: 30,
      bottom: 30,
      left: '7%',
      right: '7%'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    
    legend: {
      data: []
    },
    xAxis: [
      {
        type: 'category',
        data: ['1组', '2组', '3组', '4组', '5组', '6组', '7组'],
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        // name: '分数',
        min: 0,
        max: 100,
        interval: 10,
        axisLabel: {
          formatter: '{value} 分'
        }
      },
      {
        type: 'value',
        // name: '人数',
        min: 0,
        max: 10,
        interval: 1,
        axisLabel: {
          formatter: '{value} 人'
        }
      }
    ],
    series: [
      {
        name: '平均分',
        type: 'bar',
       barWidth: '15',
        data: [
        83, 57, 90, 78, 66, 76, 77, 87, 69, 92, 88, 78
        ]
      },
      {
        name: '低于60分人数',
        type: 'bar',
         barWidth: '15',
          yAxisIndex: 1,
        data: [
          2, 1, 3, 4, 2, 5, 2, 2, 4, 1, 6, 2
        ]
      },
      {
        name: '60到80分人数',
        type: 'bar',
         barWidth: '15',
        yAxisIndex: 1,
        data: [3, 2, 1, 5, 1, 2, 3, 4, 5, 2, 2, 4]
      },
       {
        name: '高于80分人数',
        type: 'bar',
         barWidth: '15',
        yAxisIndex: 1,
        data: [3, 2, 1, 5, 1, 2, 3, 4, 5, 2, 2, 4]
      },
    ]
    
  };
  myChart.setOption(option);
  }
  

  
  barChart()
